import * as React from "react";
import "@/css/Header.less"
import {Link} from "react-router-dom"
import {Input} from 'antd';

const {Search} = Input;
import {EditOutlined} from '@ant-design/icons';
import eventBus from "@/hooks/events";
import {withRouter} from "@/hooks/withRouter"
import cookie from "react-cookies";
import {axiosRequest} from "@/service";

type TabItem = {
    name: string,
    index: string,
    href: string,
}

type StateType = {
    tab: string,
    tabs: Array<TabItem>,
    classifyActive: string,
    classifyTab: Array<TabItem>,
    searchKey: string
    userName: string
    userImg: string
};

class Header extends React.Component <any, StateType> {
    constructor(props: any) {
        super(props);

        const liTab = [
            {name: "首页", index: "001", href: "/"},
            {name: "原创", index: "002", href: "/"},
            {name: "转载", index: "003", href: "/"},
            {name: "资讯", index: "004", href: "/"},
            {name: "书架", index: "005", href: "/"},
            {name: "足迹", index: "006", href: "/"},
            {name: "工具箱", index: "007", href: "/"},
        ]

        const classifyTab = [
            {name: "全部", index: "001", href: "/"},
            {name: "前端", index: "002", href: "/"},
            {name: "后端", index: "003", href: "/"},
            {name: "算法", index: "004", href: "/"},
            {name: "架构", index: "005", href: "/"},
            {name: "面试", index: "006", href: "/"},
            {name: "阅读", index: "007", href: "/"},
            {name: "笔记", index: "008", href: "/"},
        ]

        this.state = {
            tab: '001',
            tabs: liTab,
            classifyActive: '001',
            classifyTab,
            searchKey: '',
            userName: '',
            userImg: ''
        }

        this.getUserInfo()

    }

    getUserInfo = () => {
        if (!cookie.load('token')) {
            return
        }
        const config = {
            url: 'getUser',
            method: 'post',
            data: {
                token: cookie.load('token')
            }
        }

        axiosRequest(config).then((res: any) => {
            if (res && res.data && res.data.length > 0) {
                this.setState(Object.assign({}, this.state, {
                    userName: res.data[0].nick_name,
                    userImg: res.data[0].avatar
                }));
            }
        }).catch((err: any) => {
            console.log(err)
        })
    }

    searchMethods = (isHref: Boolean = false) => {
        const params = {
            classifyOne: this.state.tab,
            classifyTwo: this.state.classifyActive,
            titleKey: this.state.searchKey
        }
        if (!isHref) {
            this.props.navigate('/')
        }
        setTimeout(() => {
            eventBus.emit('search', params)
        })

    }

    HitTab(idx: number, href: string) {
        this.setState(Object.assign({}, this.state, {tab: idx}), () => {
            this.searchMethods()
        });

        // this.props.history.push(href);
    }

    HitClassifyTab(idx: string, href: string) {
        this.setState(Object.assign({}, this.state, {classifyActive: idx}), () => {
            this.searchMethods()
        });

        // this.props.history.push(href);
    }

    RenderLi(liTab: Array<TabItem>, tab: string, fn: Function, key: string) {
        return liTab.map((item) => {
            return (
                <li
                    key={item.index + key}
                    className={tab === item.index ? 'liTab active' : 'liTab'}
                    onClick={() => {
                        fn.call(this, item.index, item.href)
                    }}>
                    <span>{item.name}</span>
                </li>
            )
        })
    }

    onSearch = (value: string) => {
        this.setState(Object.assign({}, this.state, {searchKey: value}), () => {
            this.searchMethods()
        });
    }


    render() {
        const {tabs, tab, classifyTab, classifyActive} = this.state;
        return (
            <main className="header-bg">
                <div>
                    <div className="head">
                        <div className="logo">
                            <span className="logo-font">七里香</span>
                        </div>
                        <ul className="ul-tab">
                            {this.RenderLi.call(this, tabs, tab, this.HitTab, 'menu')}
                        </ul>

                        <div>

                        </div>
                        <Search placeholder="搜点什么" style={{width: 304}} onSearch={this.onSearch}
                                onChange={(val: any) => {
                                    this.setState(Object.assign({}, this.state, {searchKey: val.target.value}))
                                }} enterButton/>

                        <div className="login-box">
                            <Link to='/bytemd'>
                                <span>写博文</span> <EditOutlined/>
                            </Link>
                            {
                                this.state.userName ?
                                    <span className="login-text">
                                        <span className="avator"> <img className="avator-box" src={this.state.userImg}/> <span>{this.state.userName}</span></span>
                                    </span> :
                                    <Link to='/login'>
                                        <span className="login-text">登录</span>
                                    </Link>
                            }

                        </div>

                    </div>

                    <div className="head-b">
                        <ul className="ul-t">
                            {this.RenderLi.call(this, classifyTab, classifyActive, this.HitClassifyTab, 'type')}
                        </ul>
                    </div>
                </div>
            </main>
        )
    }
}

export default withRouter(Header)
